<template>
  <div class="mt-20px mb-20px service-table">
    <BasicTable @register="registerTable" @edit-change="handleEditChange">
      <template #action="{ column, record }">
        <template v-if="!isReadOnly">
          <TableAction :actions="createActions(record, column)" />
        </template>
      </template>
    </BasicTable>
    <Button
      block
      class="mt-5 !text-xs"
      type="dashed"
      preIcon="gala:add"
      @click="handleAdd"
      v-if="!isReadOnly"
    >
      {{ t('modalForm.system.system_add_service') }}
    </Button>
  </div>
</template>
<script lang="ts">
  import { defineComponent, inject, toRefs, watch } from 'vue';
  import {
    BasicTable,
    useTable,
    TableAction,
    BasicColumn,
    ActionItem,
    EditRecordRow,
  } from '/@/components/Table';
  import { Icon } from '/@/components/Icon';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { Button } from '/@/components/Button';
  import { openConfirm } from '/@/utils/confirm';
import { SetTooltip, mwidth100, width120, width170 } from '/@/views/common/component';

  const { t } = useI18n();
  const columns: BasicColumn[] = [
    {
      title: t('table.system.system_index_table'),
      dataIndex: 'id',
      editRow: false,
      minWidth: 50,
    },
    {
      title: t('table.common.system_service_link'),
      dataIndex: 'url',
      editRow: true,
      editRule: true,
      minWidth:mwidth100,
    },
    {
      title: t('table.system.remark'),
      dataIndex: 'remark',
      editRow: true,
      minWidth:mwidth100
    },
    {
      title: t('table.system.system_table_header_status'),
      dataIndex: 'state',
      editRow: true,
      editComponent: 'Switch',
      editValueMap: (value) => {
        return value == 1 ? t('table.common.activate') : t('table.common.deactivate');
      },
      minWidth:mwidth100,
      editComponentProps: {
        onChange(checked: boolean) {
          console.log(checked);
        },
      },
    },
  ];

  export default defineComponent({
    components: { BasicTable, TableAction, Icon, Button },
    props: {
      dataList: {
        type: Array,
        default: () => [],
      },
    },
    setup(props) {
      const isReadOnly = inject('isReadOnly', false);
      const { dataList } = toRefs(props);
      const [registerTable, { getDataSource, setTableData }] = useTable({
        columns: columns,
        showIndexColumn: false,
        bordered: true,
        dataSource: dataList.value,
        actionColumn: {
          width: 160,
          title: t('table.system.operate'),
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        scroll: { y: '100%' },
        pagination: false,
      });

      function handleEdit(record: EditRecordRow) {
        record.onEdit?.(true);
      }

      function handleCancel(record: EditRecordRow) {
        // openConfirm(t('common.warning'), '是否取消编辑？', () => {

          record.onEdit?.(false);
          if (record.isNew) {
            const data = getDataSource();
            const index = data.findIndex((item) => item.key === record.key);
            data.splice(index, 1);
            data.map((el, index) => {
              el.id = index + 1;
            });
          }

        // },'noCancelButton');
      }
      function handleDelete(record: EditRecordRow) {
        openConfirm(
          t('common.warning'),
          t('table.google.report_columns_APP_delete_msg'), () => {

          record.onEdit?.(false);
          const data = getDataSource();
          const index = data.findIndex((item) => item.key === record.key);
          data.splice(index, 1);
          data.map((el, index) => {
            el.id = index + 1;
          });

        },'noCancelButton');
      }

      function handleSave(record: EditRecordRow) {
        record.onEdit?.(false, true);
      }

      function handleEditChange(data: Recordable) {
        console.log(data);
      }

      function handleAdd() {
        const data = getDataSource();
        const addRow: EditRecordRow = {
          url: '',
          remark: '',
          status: '',
          id: data.length + 1,
          editable: true,
          isNew: true,
          key: `${Date.now()}`,
        };
        data.push(addRow);
      }

      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
        if (!record.editable) {
          return [
            {
              label: t('common.editorText'),
              onClick: handleEdit.bind(null, record),
            },
            {
              label: t('common.delText'),
              onClick: handleDelete.bind(null, record),
            },
          ];
        }
        return [
          {
            label: t('common.sure'),
            onClick: handleSave.bind(null, record, column),
          },
          {
            label: t('common.cancelText'),
            onClick: handleCancel.bind(null, record, column)
          },
        ];
      }

      watch(
        () => props.dataList,
        (val) => {
          // 确保val确实是一个数组
          if (Array.isArray(val)) {
            // 创建一个新数组来存放更新后的数据
            const newData = val.map((el, index) => ({
              ...el, // 复制原来的对象
              id: index + 1, // 更新id
            }));
            setTableData(newData);
          }
        },
        { deep: true },
      );

      return {
        registerTable,
        handleEdit,
        createActions,
        handleAdd,
        getDataSource,
        handleEditChange,
        isReadOnly,
        t,
      };
    },
  });
</script>
<style lang="less" scoped>
  .service-table {
    width: calc(100% - 5px) !important;
  }

  ::v-deep(.ant-spin-container) {
    .vben-editable-cell__wrapper > input {
      height: 40px;
    }
  }
</style>
